<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo18-样式操作/获取高度</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        .bgred{background: red;}
        .white{color: #FFFFFF;}

        p{height: 30px;border: 10px solid red;padding: 10px;}

        #p2{margin: 50px;}

        div{position: relative;width: 200px;height: 200px;background: red;margin-left: 250px;}
        #p3{position: absolute;left: 100px;top: 50px;width: 50px;height: 50px;background: yellowgreen;}
    </style>

</head>
<body>
    <p>我是P标签</p>
    <br/>
    <br/>
    <hr/>
    <br/>
    <p id="p2">我的新的P标签</p>

    <br/>
    <br/>
<div>divdivdiv
    <p id="p3">33333333333333</p>
</div>
</body>
</html>

<script>

//    $('p').addClass('bgred white');
//    alert($('p').height())

//    获取真实高度
    //innerHeight不计算border，margin值但是计算padding
//    alert("我是innerHeight获得到的高度"+$('p').innerHeight());

    //outerHeight会把border,margin,padding,需要加参数true 等高度获取到
//    alert("我是outerHeight获得到的高度"+$('p').outerHeight(true));

//    offset 获取元素的位置
//    alert("新的P标签位置---"+$('#p2').offset().left)

    var a = $('#p3').position();
    var b = $('#p3').offset();

//position是相对于父元素
    alert("position方法获取到的值"+a.left)
//offset相对于浏览器窗口
    alert("offset方法获取到的值"+b.left)

</script>